<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddGradientLine.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {
      map.setZoom(14)

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_LINE_LAYER).addTo(map);

      let line = new maptalks.LineString(
          [map.getCenter().sub(0.01, 0), map.getCenter()],
          {
            arrowStyle: "classic", // we only have one arrow style now
            arrowPlacement: "vertex-last", //vertex-first, vertex-last, vertex-firstlast, point
            symbol: {
              "textName": "line",
              "textPlacement": "line",
              "textSize": 20,
              "textDy": -20,
              "textFill": "#fff",
              // linear gradient
              "lineColor": {
                "type": "linear",
                "colorStops": [
                  [0.00, "red"],
                  [1 / 4, "orange"],
                  [2 / 4, "green"],
                  [3 / 4, "aqua"],
                  [1.00, "white"]
                ]
              },
              "lineWidth": 10
            }
          }
      ).addTo(layer);

      let line1 = new maptalks.LineString(
          [map.getCenter().sub(0.015, 0.005), map.getCenter().sub(0, 0.005)],
          {
            arrowStyle: "classic", // we only have one arrow style now
            arrowPlacement: "vertex-first", //vertex-first, vertex-last, vertex-firstlast, point
            symbol: {
              // radial gradient
              "lineColor": {
                "type": "radial",
                "colorStops": [
                  [0.00, "red"],
                  [1 / 3, "orange"],
                  [2 / 3, "green"],
                  [1.00, "white"]
                ]
              },
              "lineWidth": 10
            }
          }
      ).addTo(layer);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
